<template>
    <div v-infinite-scroll="loadMore"
         :infinite-scroll-disabled="loading"
         :infinite-scroll-distance="10">
      <mt-loadmore :top-method="loadTop" ref="loadmore" :topDistance="50">
      <JL-Navigation :title="'储值记录'"/>
      <div class="fl mt59 ml10">
        <img src="@/assets/imgs/chuzhijilu.png">
      </div>

      <div class="content mt15 ml15 pb15">
        <div class="content_top">
          <span class="content_top_text">余额：{{storedValueNum}}</span>
        </div>
          <div v-for="(item,index) in storedValueDetail" :key="index">
              <span class="content_text">{{item.CZJE || 0}}</span>
              <span class="content_name_right">{{item.JELX}}</span>
              <span class="content_text_right">{{item.CZRQ}}</span>
              <hr class="line">
          </div>
      </div>
      </mt-loadmore>
    </div>
</template>

<script>
    export default {
        name: "StoredValuePage",
      data(){
          return {
            storedValueDetail: [],
            storedValueNum:0,
            loading: false,
            page_num: 1,
            isEnd: false,
          };
      },
      mounted() {
         this.page_num = 1
         this.queryMemberStoredValueDetail()
      },
      methods:{
        loadMore() {
          if (this.isEnd) return
          this.loading = true
          this.page_num++
          this.queryMemberStoredValueDetail()
        },
        queryMemberStoredValueDetail(){
          $Util.loading();
          this.$inbound.invoke({
            interfaceId:'app.member.queryMemberStoredValueDetail',
            data:{page_num: this.page_num}})
            .then(msg =>{
              $Util.hideloading()
              this.storedValueNum = msg['storedValueNum']

              this.isEnd = false;
              let list = msg['storedValueDetail'] || [];
              if ($Util.isNull(list)) this.isEnd = true;
              Array.prototype.push.apply(this.storedValueDetail, list);
              this.loading = false;
              this.$forceUpdate()

            })
            .catch(e =>{
              this.loading = false;
              $Util.hideloading()
              $Util.toast({
                message: e.MESSAGE,
                position: 'middle'
              })
            })
        },
        loadTop() {
          this.page_num = 1
          $Util.loading();
          this.$inbound.invoke({
            interfaceId:'app.member.queryMemberStoredValueDetail',
            data:{page_num: this.page_num}})
            .then(msg =>{
              $Util.hideloading()
              this.storedValueNum = msg['storedValueNum']

              let list = msg['storedValueDetail'] || [];
              if ($Util.isNull(list)) this.isEnd = true;
              this.storedValueDetail = {...{}, ...list};
              this.loading = false;
              this.$refs.loadmore.onTopLoaded();
              this.$forceUpdate()

            })
            .catch(e =>{
              this.loading = false
              $Util.hideloading()
              $Util.toast({
                message: e.MESSAGE,
                position: 'middle'
              })
            })
        }
      }
    }
</script>

<style scoped>
  .content {
    float: left;
    width: calc(100% - 30px);
    border-radius: 5px;
    box-shadow: 0px 0px 6px #ccc;
  }

  .content_top {
    float: left;
    width: 100%;
    height: 34px;
    background-color: #6996FF;
    border-radius: 5px 5px 0 0;
  }

  .content_top_text {
    float: left;
    font-family: 'pingfang bold';
    font-size: 15px;
    color: #fff;
    line-height: 34px;
    margin-left: 15px;
  }

  .content_text {
    float: left;
    font-family: 'pingfang bold';
    font-size: 18px;
    color: #ff0000;
    margin: 20px 0 0 15px;
    width: calc(100% - 100px);
  }

  .content_name_right {
    float: right;
    font-family: 'pingfang regular';
    font-size: 12px;
    color: #999;
    margin: 15px 15px 0 0;
  }

  .content_text_right {
    float: right;
    font-family: 'pingfang regular';
    font-size: 12px;
    color: #999;
    margin: 5px 15px 0 0;
  }

  .line {
    float: left;
    width: 100%;
    border: 1px solid #f5f5f5;
    margin-top: 10px;
  }
</style>
